<template>
  <!-- 玩家拼多多管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh(false)">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="玩家ID:" label-width="60px">
            <el-input type="text" v-model="listQuery.user_id" clearable placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item label="活动状态:" label-width="80px">
            <el-select v-model="listQuery.activity_status" placeholder="请选择活动状态" filterable >
              <el-option label="全部" :value="-1" ></el-option>
              <el-option label="已结束" :value="0" ></el-option>
              <el-option label="未结束" :value="1" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="抽奖状态:" label-width="80px">
            <el-select v-model="listQuery.lottery_status" placeholder="请选择抽奖状态" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in drawData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="daterange" range-separator="至" 
            start-placeholder="开始日期" end-placeholder="结束日期" class="full-width-input time-box" 
            :default-time="['00:00:00', '23:59:59']" clearable></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="玩家ID" align="center" width="120"/>
          <el-table-column prop="nick_name" label="昵称" align="center" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="item_details" @click="handleCurrentChange(scope.row),isShowDetails = true">{{ scope.row.nick_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="account_type" label="账户类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="accountTag(scope.row.account_type)">{{ accountType(scope.row.account_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reg_time" label="注册时间" align="center" width="180"/>
          <el-table-column prop="activity_status" label="活动状态" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.activity_status?'success':'info'">{{ scope.row.activity_status?'进行中':'已结束' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lottery_status" label="抽奖状态" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="drawTag(scope.row.lottery_status)">{{ drawType(scope.row.lottery_status)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="success_invite" label="已成功邀请人数" align="center" width="150"/>
          <el-table-column prop="use_times" label="已成功转动次数" align="center" width="150"/>
          <el-table-column prop="remaining_times" label="剩余转动次数" align="center" width="150"/>
          <el-table-column prop="pdd_winning_time_str" label="拼多多中奖时间" align="center" width="150"/>
          <el-table-column prop="pdd_hit_times" label="拼多多第几次中奖" align="center" width="150"/>
          <el-table-column prop="pdd_cash_time_str" label="拼多多提现发起时间" align="center" width="150"/>
          <el-table-column prop="admin_name" label="操作人" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.admin_id">【{{scope.row.admin_id}}】</span>
              {{scope.row.admin_name}}
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" align="left" fixed="right" width="120" >
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="" content="设置中奖" placement="top-start">
                <el-button size="mini" type="danger" :disabled="scope.row.admin_id?true:false" @click="setDraw(scope.row)" icon="el-icon-setting"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" :data="checkedItem" @onHideDetails="onHideDetails" />
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getPinduoduoPlayer,
  setPinduoduoPlayer,
} from '@/api/player'
import {
  ACCOUNT_TYPE,
} from '@/utils/enum'
import PageDetails from '../user/page-details'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'pinduoduoUser',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      ACCOUNT_TYPE,
      channelData: this.$store.state.commonState.channelDataArray,
      dataList:[],
      listQuery: {
        page: 1,
        size: 50,
        user_id:'',
        agent_id:'',
        activity_status:-1,
        lottery_status:-2,
        dateTime:[this.$public.getDateDay(-1)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: 0,
        end_time: 0,
      },
      checkedItem: null,
      isShowDetails: false,
      listLoading: false,
      currentTotal: 0,
      drawData:[
        {label:'全部',value:-2,type:''},
        {label:'未中提现概率',value:-1,type:'info'},
        {label:'未提现',value:0,type:'info'},
        {label:'提现审核中',value:1,type:'warning'},
        {label:'提现成功',value:2,type:'success'},
        {label:'提现拒绝',value:3,type:'danger'},
      ],
    }
  },
  created () {},
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList()
  },
  methods: {
    // 获取拼多多转盘玩家列表
    async getDataList (query) {
      let that = this,params=JSON.parse(JSON.stringify(that.listQuery));
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = []
      that.checkedItem = null
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      } else {
        params.start_time=''
        params.end_time=''
      }
      const response = await getPinduoduoPlayer(params)
      if (response.code == 1) {
        if(response.data){
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.dataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(error.msg)
      }
      that.listLoading = false
    },
    // 设置中奖
    setDraw(row){
      let that = this;
      that.handleCurrentChange(row)
      that.$confirm(`是否让玩家【${row.nick_name}】中提现大奖?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setPinduoduoPlayer({
          id: row.id
        }).then(res => {
          if (res.code == 1) {
            that.getDataList()
            that.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      }).catch((err) => {})
    },
    // 账号类型展示
    accountType(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.label || "测试账号");
    },
    // 账号类型展示
    accountTag(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.type || "-");
    },
    // 抽奖类型展示
    drawType(cellValue){
      return (this.drawData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 抽奖类型展示
    drawTag(cellValue){
      return (this.drawData.find((item) => item.value === cellValue)?.type || "-");
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val
      this.dataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    onHideDetails (type) {
      this.isShowDetails = false
      if(type){
        this.getDataList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        user_id:'',
        agent_id:'',
        activity_status:-1,
        lottery_status:-2,
        dateTime:[this.$public.getDateDay(-1)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: 0, //注册开始时间
        end_time: 0, //注册结束时间
      }
      this.getDataList(true)
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.prooItem {
  margin: 10px;
  font-size: 18px;
  font-weight: 550;
  p {
    height: 21px;
  }
}
.propDeduct{
  font-size: 18px;
  font-weight: 600;
  .colorRed{
    font-size: 21px;
  }
}
</style>
